@import "src/css/mixin";

#MyPack {
  background: #FFFFFF;

  //进度条
  .progress {
    margin-left: .75rem;
    margin-right: .2rem;
    margin-bottom: 0; 
    height: .1rem!important;
    box-shadow:none!important;
    background-color: #e3e8ee;
    border-radius: 50px;
  }
  .pro-title{
    margin-left: .75rem;
    font-size: .12rem;
    color: $gray;
    letter-spacing: 0;
    margin-bottom:.1rem;
    line-height: .12rem;
  }
  .icon-phone06{
    position: absolute;
    color: $blue;
    font-size: .2rem;
    left: .32rem;
    top: .22rem;
    font-weight: 700;
  }
  .icon-tixing{
    position: absolute;
    color: $blue;
    font-size: .2rem;
    left: .32rem;
    top: .18rem;
    font-weight: 700;
  }
  // //////////////
  .progress-bar {
    background-color: $blue;
    box-shadow: none!important;
  }
  .service-title {
    font-size: 0.17rem;
    line-height: 1;
    text-align: center;
    color: $black;
    height: 0.48rem;
    padding: 0.15rem;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.13);
  }
  .return {  
    float: left;
    font-size: .14rem;
    color: #83848e;
    display: block;
    width: .5rem;
    height: .47rem;
    background-color: #fff;
    text-align: center;
    line-height: .5rem;
    position: absolute;
    left: .1rem;
    top: 0;

    .icon-return{
      color: $lightgray;
      position: relative;
      top: 1px;
    }
  }
  .container{
    background: #f2f2f2;
  }
  .userInfo{
      padding: .2rem;
      position: relative;
      background: #fff;

      img{
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        position: absolute;
        left: .2rem;
        top: .2rem;
      }
      .nick{
        padding-left: .55rem;

        strong{
          line-height: .17rem;
          font-size: .17rem;
          color: $black;
          .w-grab{
            font-size: .12rem;
            color: #B19510;
            letter-spacing: -0.5px;
            line-height: 1.8;
            font-weight: 500;
          }
        }
        p{
          margin: 6px 0 0;
          font-size: .12rem;
          line-height: .12rem;
          color:$lightgray;
        }
      }
  }
  .myPackage{
    height: .55rem;
    margin: 0px -0.2rem;
    background: #fff;
    text-align: left;
    color: #c0c2c4;
    font-size: .12rem;
    padding: .08rem 0 0rem;
    line-height: .13rem;
    p{
      margin: 0;
    }
    .count{
      margin-bottom: .15rem;
    }
    .used{
      color: $black;
    }
    .left{
      float: left;
      position: relative;
      left: .75rem;
    }
    .right{
      float: right;
      position: relative;
      right: .2rem;
      text-align: right;
      
    }
  }
  .marginBotoom{
    margin-bottom: .1rem;
  }
  .package-type {
    background: #fff;
    padding: 0 0.2rem .12rem 0.2rem;

    h4 {
      font-size: .16rem;
      color: $black;
      margin: 0;
      padding-top: 0.2rem;

      small {
        font-size: 0.13rem;
        color: $lightgray;
        letter-spacing: -0.63px;

        .icon-circle-down {
          font-size: 0.12rem;
          margin-left: 0.10rem;
        }
      }
    }
    .promotion {
      width: 0.19rem;
      height: 0.19rem;
      background: #F6A623;
      border-radius: 0.02rem;
      font-size: 0.12rem;
      color: #FFFFFF;
      letter-spacing: -0.58px;
      text-align: center;
      line-height: 0.19rem;
      margin-left: 0.07rem;
      display: inline-block;
      vertical-align: 0.02rem;
    }
  }

  .package-spec {
    font-size: 0.13rem;
    padding-top: 0.18rem;
    padding-bottom: 0.13rem;
    border-bottom: 0.01rem solid #e3e8ee;
    div {
      padding: 0;
    }
  }

  .package-select {
    font-size: 0.14rem;
    color: $gray;
    padding: 0.1rem 0;
    border-bottom: 0.01rem solid #e3e8ee;
    &:last-child{
      // border: none;
    }
    div {
      padding: 0;
    }

    .btn-renew {
      width: 0.6rem;
      height: 0.29rem;
      border-radius: 0.02rem;
      font-size: 0.13rem;
      padding: 0;
      outline: none;
    }

    .renew-price {
      color: $black;
    }
    .package-sel-col {
      padding: 0;
      padding-top: 0.05rem;
    }

    .trial {
      width: 0.37rem;
      height: 0.19rem;
      background: #F6A623;
      border-radius: 0.5rem;
      font-size: 0.12rem;
      color: #fff;
      position: absolute;
      left: -0.43rem;
      top: 0;
      text-align: center;
      line-height: 0.19rem;
    }
    .select-rel {
      position: relative;
    }

    .ori-price {
      font-size: 0.12rem;
      color: $gray;
      position: absolute;
      left: -0.36rem;
      top: 0.01rem;
      text-decoration:line-through
    }
    .half_price_tip{
      font-size: .12rem;
      color: $gray;
      letter-spacing: 0;
    }
    .half_price_gray{
      font-size: .12rem;
      color: $lightgray;
      letter-spacing: 0;
      line-height: .17rem;
    }
    .half_price_red{
      background-color: #D0021B;
      margin-top: .06rem;
    }
  }
  .line_height{
    line-height: 1.25;
  }
  .package-explain {
    padding: 0 .2rem .26rem .2rem;
    background-color: #fff;

    h6 {
      font-size: 0.12rem;
      color: $gray;
      margin: 0;
      padding-top: 0.27rem;
      margin-bottom: 0.12rem;
    }
    p {
      font-size: 0.12rem;
      color: $lightgray;
      letter-spacing: 0;
      line-height: 0.2rem;
      margin: 0;
    }
  }
  .package-discount{
    height: 1.73rem;
    margin: 0 -.2rem;
    padding: .29rem 0 .25rem .2rem;
    color: #B19510;
    background: url("`{CURURL}`/images/bgRechange.jpg") center center no-repeat;
    background-size: 100%;
    .discount-title{
      font-size: .13rem;
      color: #C7AA20;
      letter-spacing: 0;
      line-height: .13rem;
      margin-bottom: .11rem;
      .big{
        font-size: .25rem;
        color: #B19510;
        letter-spacing: 0;
        line-height: .25rem;
        font-weight: 600;
      }
    }
    p{
      font-size: .12rem;
      color: #B19510;
      letter-spacing: 0;
      line-height: .12rem;
      margin-bottom: .28rem;
    }
    .recharge{
      width: 1.33rem;
      height: .43rem;
      background: #B19510;
      color: #fff;
      box-shadow: 0 0 4px 0 rgba(177,149,16,0.50);
      border-radius: .5rem;
      font-size: .15rem;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
    }
    .recharge:hover, .recharge:focus, .recharge:active, .recharge:hover:focus{
        border: none;
        outline: none;
    }
  }
  
}
  
